<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back">
			<view class="diwen_box">
				<image class="diwen_img" src="../../../../static/img/tuihuo/diwen.png"></image>
			</view>
		</view>
		<!--顶部导航-->
		<uni-nav-bar 
			left-icon="back" 
			color="#fff" 
			:fixed="true" 
			:statusBar="true" 
			backgroundColor="transparent" 
			:border="false"
			@clickLeft="clickLeft"
		></uni-nav-bar>
		
		<view class="status_box">
			<view class="status_left_box">
				<view class="text_img_box">
					<view class="img_box">
						<image class="status_img" src="../../../../static/img/tuihuo/time.png"></image>
					</view>
					<view class="status_text">等待审核</view>
				</view>
				
				<view class="status_tishi_info">退货申请提交成功，请耐心等待审核结果。</view>
			</view>
			
			<view class="status_right_box">
				<view class="right_img_box">
					<image class="r_img" src="../../../../static/img/tuihuo/kefu.png"></image>
				</view>
				<view class="r_text">联系客服</view>
			</view>
		</view>
		
		
		<!-- 同意退款css -->
		<view class="success_tuihuo_box">
			<view class="tui_img_box">
				<view class="t_img">
					<image class="t_img1" src="../../../../static/img/tuihuo/address.png" ></image>
				</view>
				<view class="tui_text">退货地址</view>
			</view>
			
			<view class="tui_text_box">
				<view style="display: flex;">
					<view class="tui_name">潘先生</view>
					<view class="tui_phone">13714400881</view>
				</view>
				<view>
					<view class="copy_buton1">复制信息</view>
				</view>
			</view>
			
			<view class="tui_address">广东省 广州市 天河区 车陂大道东362号粤海广场写字楼38层仓库033</view>
			
			<view class="tui_input_box">
				<view class="input_shur">
					<input class="input_aft" placeholder-class="input_place" placeholder="请填写物流单号" />
				</view>
				<view class="input_button">我已寄出</view>
			</view>
		</view>
		<!-- 同意退款ccs -->
		
		
		<view class="goods_info_box">
			<view class="goods_up">
				<view class="goods_left_box">
					<view class="goods_img_box">
						<image class="goods_img" src="../../../../static/logo.png" ></image>
					</view>
				</view>
				
				<view class="goods_text_box">
					<view class="goods_name">MAGIC DRAGON魔杰龙轻柔倍适学</view>
					
					<view class="size_box">
						<view class="size_num">尺寸：L</view>
						<view class="size_num1">X1</view>
					</view>
				</view>
			</view>
			<view class="goods_pay_box">
				<view class="goods_pay">退款金额：</view>
				<view class="tuikan_money">¥138.00</view>
			</view>
		</view>
		
		<view class="tuihuo_info_box">
			<view class="t_info_box">
				<view class="tui_text">退款编号</view>
				<view class="t_r_info_box">
					<view class="t_bian_num">429039454697841</view>
					<view class="copy_buton">复制</view>
				</view>
			</view>
			
			<view class="t_info_box">
				<view class="tui_text">申请时间</view>
				<view class="t_bian_num">2021-07-27 14:34</view>
			</view>
			
			<view class="t_info_box">
				<view class="tui_text">申请理由</view>
				<view class="t_bian_num">这包破了</view>
			</view>
			
			<view class="t_info_box">
				<view class="tui_text">上传凭证</view>
				<view class="t_bian_num"></view>
			</view>
			
			<view class="flex_display">
				<view class="magr">
					<u--image :showLoading="true" :src="src" width="80px" height="80px" :lazy-load="true" @click="click"></u--image>
				</view>
				<view class="magr">
					<u--image :showLoading="true" :src="src" width="80px" height="80px" :lazy-load="true" @click="click"></u--image>
				</view>
				<view class="magr">
					<u--image :showLoading="true" :src="src" width="80px" height="80px" :lazy-load="true" @click="click"></u--image>
				</view>
			</view>
			    
			  
		</view>
		
		
		<view style="height: 202upx;"></view>
		
		<view class="button_box_tijiao">
			<view class="tijiao_button" hover-class="hover_click">撤销申请</view>
		</view>
		
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				src: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}
		},
		created(){
			
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F8F9;
	}
	.content{
		padding-bottom: 58upx;
	}
	.page_back{
		width: 100%;
		height: 648upx;
		background: linear-gradient(360deg, rgba(48, 172, 255, 0) 0%, #3EB2FF 50%, #58BCFF 100%);
		position: fixed;
		z-index: -100;
	}
	.diwen_box{
		box-sizing: border-box;
		position: absolute;
		width: 538upx;
		height: 732upx;
		right: -222upx;
		top: 14upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.diwen_img{
		width: 538upx;
		height: 732upx;
	}
	.status_box{
		margin: 20upx 34upx 48upx 28upx;
		width: 688upx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		border-radius: 8upx;
	}
	
	.text_img_box{
		display: flex;
		align-items: center;
	}
	.img_box{
		width: 48upx;
		height: 48upx;
	}
	.status_img{
		width: 48upx;
		height: 48upx;
	}
	.status_text{
		font-size: 48upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 48upx;
		margin: 12upx;
	}
	.status_tishi_info{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40upx;
		margin-top: 24upx;
	}
	.status_right_box{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 22upx;
	}
	.right_img_box{
		width: 58upx;
		height: 58upx;
	}
	.r_img{
		width: 58upx;
		height: 58upx;
	}
	.r_text{
		margin-top: 6upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34upx;	
	}
	.goods_info_box{
		background-color: #FFFFFF;
		margin: 0upx 26upx 0 28upx;
		padding: 36upx 18upx 36upx 24upx;
		border-radius: 8upx;
	}
	
	.goods_up{
		display: flex;
		justify-content: space-between;
	}
	
	.goods_img_box{
		width: 200upx;
		height: 200upx;
	}
	.goods_img{
		width: 200upx;
		height: 200upx;
	}
	.goods_text_box{
		margin-left: 28upx;
	}
	.goods_name{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.size_box{
		margin-top: 12upx;
		display: flex;
		justify-content: space-between;
		width: 418upx;
	}
	.size_num{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.size_num1{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
	}
	.goods_pay_box{
		margin-top: 12upx;
		display: flex;
		justify-content: flex-end;
		margin-right: 6upx;
		align-items: baseline;
	}
	.goods_pay{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.tuikan_money{
		font-size: 32upx;
		color: #333333;
		font-weight: 600;
		font-family: PingFangSC-Regular, PingFang SC;
		line-height: 40upx;
	}
	
	.tuihuo_info_box{
		padding: 36upx 24upx 36upx 24upx;
		background: #FFFFFF;
		width: 696upx;
		height: 518upx;
		margin: 12upx 26upx 0 28upx;
		box-sizing: border-box;
		border-radius: 8upx;
	}
	.t_info_box{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		height: 75upx;
	}
	.tui_text{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
	}
	.t_r_info_box{
		display: flex;
		
	}
	.t_r_info_box1{
		display: flex;
	}
	.t_bian_num{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.copy_buton{
		margin-left: 12upx;
		width: 72upx;
		height: 36upx;
		text-align: center;
		border: 1upx solid #6EC5FF;
		color: #5ABDFF;
		font-size: 24upx;
	}
	.flex_display{
		display: flex;
	}
	.magr{
		margin-right: 12upx;
	}
	.button_box_tijiao{
		z-index: 10;
		/* position: fixed; */
		position: relative;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		margin-bottom: 54upx;
	}
	.tijiao_button{
		width: 620upx;
		line-height: 100upx;
		background: #58BCFF;
		border-radius: 52upx;
		text-align: center;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.hover_click{
		background: #5bc7fd;
	}
	
	.success_tuihuo_box{
		margin: 0 26upx 12upx 28upx;
		padding: 36upx 24upx 34upx 24upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 8upx;
	}
	.tui_img_box{
		display: flex;
	}
	.t_img{
		width: 36upx;
		height: 36upx;
	}
	.t_img1{
		width: 36upx;
		height: 36upx;
	}
	.tui_text{
		margin-left: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
	}
	.tui_text_box{
		display: flex;
		margin-top: 20upx;
		justify-content: space-between;
	}
	.tui_name{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 40upx;
	}
	.tui_phone{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
		margin-left: 24upx;
	}
	.copy_buton1{
		width: 120upx;
		height: 36upx;
		text-align: center;
		border: 1upx solid #6EC5FF;
		color: #5ABDFF;
		font-size: 24upx;
	}
	.tui_address{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34upx;
		margin-top: 24upx;
	}
	.tui_input_box{
		margin-top: 12upx;
		width: 648upx;
		height: 80upx;
		display: flex;
	}
	.input_shur{
		width: 440upx;
		height: 80upx;
		border: 2upx solid #58BCFF;
		box-sizing: border-box;
		padding: 24upx 0 22upx 22upx;
		display: flex;
		align-items: center;
	}
	.input_button{
		width: 208upx;
		line-height: 80upx;
		background: #58BCFF;
		text-align: center;
		border: 1upx solid #6EC5FF;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.input_place{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.input_aft{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 34upx;
		width: 400upx;
	}
</style>
